<template>
  <div class="play_popup">
    <van-popup
      v-model:show="show"
      closeable
      position="bottom"
      @close="popupClose"
      :style="{ height: '30%' }"
    >
      <div class="play_title">给钱</div>
      <div class="play_type">
        <van-button
          @click="handPlay(1)"
          style="margin-bottom: 10px"
          color="#1989fa"
          type="primary"
          >支付宝支付</van-button
        >
        <van-button @click="handPlay(2)" color="#4fc08d" type="primary"
          >微信支付</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "PlayPopup",
  props: {
    orderNo: {
      type: String,
      default: "",
    },
  },
  setup(props, ctx) {
    const show = ref(false);
    const handPlay = (type: number) => {
      //
      ctx.emit("handplay", type);
    };
    const showModel = () => {
      show.value = true;
      ctx.emit("showmodel");
    };
    const hide = () => {
      show.value = false;
      ctx.emit("hide");
    };
    return { show, handPlay, showModel, hide };
  },
});
</script>
<style lang="scss">
.play_title {
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}
.play_type {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;
}
.site_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .site_title {
    font-weight: bold;
    font-size: 16px;
    margin: 6px 0;
  }
}
</style>
